// 企业列表新增组件
<template>
  <div>
    <div class="add_container_box">
      <div class="add_container" @click="addClick()" v-hasPermi="['Built:Know:Lab']">
        <svg-icon icon-class="addZsq" size="24"></svg-icon>
        <div class="add_container_text">
          <p>新建知识库</p>
          <span>创建知识库，分享知识、信息、资源</span>
        </div>
      </div>
    </div>
    <el-dialog v-model="dialogVisible" title="知识库创建" width="600" :before-close="onClose" @open="dialogOpen">
      <el-form ref="formRef" label-position="top" label-width="auto" :model="formLabelAlign" style="max-width: 600px" :rules="rules">
        <el-form-item label="知识库名称" prop="realName">
          <el-input v-model="formLabelAlign.realName" placeholder="请输入名称" />
        </el-form-item>
        <el-form-item label="知识分类" prop="classify">
          <el-select v-model="formLabelAlign.classify" placeholder="请选择知识分类" style="width: 240px">
            <el-option v-for="item in wiki_type" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="知识库类型" >
          <el-select v-model="knowledgeType" placeholder="请选择知识分类" style="width: 240px">
            <el-option label="普通知识库" value="1" />
            <el-option label="AI问答知识库" v-if="isOpenKnowledge" value="2" />
            <el-option label="外部知识库" value="3" />
          </el-select>
        </el-form-item>
        <el-form-item label="外部知识库地址" v-if="knowledgeType === '3'" prop="location">
          <el-input v-model="formLabelAlign.location" placeholder="请输入地址" />
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input-number v-model="formLabelAlign.sort"  :min="1" :max="99"></el-input-number>
        </el-form-item>
        <el-form-item label="简介" prop="remarks">
          <el-input type="textarea" v-model="formLabelAlign.remarks" placeholder="请输入简介" />
        </el-form-item>
        <el-form-item label="封面" prop="remarks">
          <CoverList ref="coverListRef" v-model:realNameVal="formLabelAlign.realName" v-model:remarksVal="formLabelAlign.remarks" v-model:imageUrlVal="formLabelAlign.imageUrl" ></CoverList>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <div>
            <!-- <el-checkbox @change="onIsAilLibrary" v-model="formLabelAlign.isKnowledge" label="是否为AI文档知识库" size="large" /> -->
          </div>
          <div>
            <el-button @click="onClose"> 取消 </el-button>
            <el-button type="primary" @click="handleClose"> 创建 </el-button>
          </div>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import CoverList from './cover-list.vue';
// 接口
import { apiEnterpriseKnowledgeAdd, apiKnowledgeConfigConfigKey } from '@/api/enterpriseDoc/enterpriseListApi';
import { ref, reactive, toRefs, defineProps, defineEmits } from 'vue';
import { ElMessage } from 'element-plus';
const formRef = ref(null);
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const emits = defineEmits(['onRefresh']); //参数为数组
const props = defineProps({
  isAddPower: {
    default: false
  }
});

const { wiki_type } = toRefs<any>(proxy?.useDict('wiki_type'));
const coverListRef = ref(null)
// 表单数据
const formLabelAlign = reactive({
  realName: '',
  classify: '',
  remarks: '',
  imageUrl: '',
  sort: 99,
  location: null,
  isKnowledge: false
});
const knowledgeType = ref<string>('1'); //知识库类型
// 表单校验
const rules = reactive<any>({
  realName: [{ required: true, message: '请输入名称', trigger: 'blur' }],
  classify: [{ required: true, message: '请选择分类', trigger: 'blur' }],
  location: [{ required: true, message: '请输入地址', trigger: 'blur' }]
});

const dialogVisible = ref(false);
// 打开弹窗回调
const dialogOpen = () =>{
  coverListRef.value.openCoverList();
}
// 打开弹窗
const addClick = () => {
  // if(props.isAddPower === false){
  //   ElMessage.error('无权限创建知识库');
  //   return;
  // }
  dialogVisible.value = true;
  onIsAilLibrary();
};
// 关闭弹窗
const onClose = () => {
  dialogVisible.value = false;
  formRef.value.resetFields();
  knowledgeType.value = '1';
  formLabelAlign.isKnowledge = false;
  formLabelAlign.location = null;
};
const isOpenKnowledge = ref<boolean>(false); //是否开启知识库
// 是否开启知识库接口
const onIsAilLibrary = async () => {
  let res: any = await apiKnowledgeConfigConfigKey('knowledge_base_state');
  if (res.code == 200) {
    isOpenKnowledge.value = res.data == 'dify' ? true : false;
  }
};
// 表单提交
const handleClose = () => {
  console.log(formLabelAlign);
  // return
  formRef.value.validate(async (valid) => {
    if (valid) {
      // if (formLabelAlign.isKnowledge && !isOpenKnowledge.value) {
      //   ElMessage.error('问答知识库信息未配置');
      //   return;
      // }
      // formLabelAlign.imageUrl = selectImg.value.name;
      if(knowledgeType.value == '2'){
        formLabelAlign.isKnowledge = true;
      }
      let res = await apiEnterpriseKnowledgeAdd(formLabelAlign);
      if (res.code === 200) {
        ElMessage.success('创建成功');
        onClose();
        emits('onRefresh');
      }
    }
  });
};
/**封面组件emit事件 */
const CoverList_imageUrlVal = (val:any) =>{
  formLabelAlign.imageUrl = val
}
</script>
<style scoped lang='scss'>
.cover_box {
  display: flex;
  .cover_img {
    position: relative;
    margin-right: 20px;
    margin-top: 32px;
    img {
      width: 207px;
      height: 300px;
      border-radius: 8px;
    }
    .cover_img_text {
      position: absolute;
      top: 1px;
      padding: 25px;
      p {
        margin: 0;
        color: white;
        font-size: 23px;
        line-height: 30px;
      }
      span {
        color: white;
        font-size: 13px;
      }
    }
  }
  .cover_list {
    .cover_list_item {
      p {
        margin: 0;
        font-size: 12px;
      }
      img {
        width: 72px;
        height: 98px;
        border-radius: 8px;
      }
      .cover_list_img {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        .active {
          border: 3px solid rgb(20, 86, 240);
        }
      }
    }
  }
}
:deep(.el-dialog__header) {
  padding: 0 !important;
  padding-bottom: 10px !important;
}
.add_container_box {
  display: flex;
  gap: 15px;
}
.add_container {
  &:hover {
    background-color: rgba(31, 35, 41, 0.08);
  }
  width: 270px;
  height: 60px;
  border: 1px solid rgb(222, 224, 227);
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding-left: 15px;
  .add_container_text {
    padding-left: 10px;
    p {
      margin: 0;
      font-size: 14px;
      font-weight: 500;
    }
    span {
      font-size: 12px;
      color: rgb(100, 106, 115);
    }
  }

  .svg-icon {
    font-size: 24px;
  }
}
:deep(.el-dialog__footer) {
  padding: 0;
  .dialog-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>